/*
  学习目标：Redux在React中的使用
  需求：使用Redux保存数据，并且组件卸载时不销毁count的值
  步骤：
     1. 创建store： src/store/index.js
     2. 从store中取出count， 作为初始值
     3. 点击事件在redux中修改count的值
     4. useEffect 中 监听数据变化，同步数据给React
     5. 卸载时关闭监听

*/
import store, { addAction, decAction } from './store/index';
import { useEffect, useState } from 'react';

// console.log('store -----> ', store.getState().count);

export default function App() {
  const [show, setShow] = useState(true);
  return (
    <div>
      <h1>Redux基础案例</h1>
      <button onClick={() => setShow(!show)}>点击切换卸载挂载</button>
      {show ? <Son /> : null}
    </div>
  );
}

function Son() {
  // 读取了redux中修改count的值
  const [count, setCount] = useState(store.getState().count);
  // 修改时候，把 值存放到 redux

  // 修改时，可能看不到效果
  // redux 它是负责存数据 - 更新页面我不管
  // react 我负责更新页面，你要调用我的 setState 才能更新
  // 解决：监听 store变化，变化时，setState
  useEffect(() => {
    // 渲染完成开始监听
    const unFn = store.subscribe(() => {
      setCount(store.getState().count);
    });
    // 卸载时，停止监听
    return () => {
      unFn();
    };
  });
  return (
    <div>
      <h2>子组件</h2>
      <h2>count:{count}</h2>
      <button onClick={() => store.dispatch(addAction(1))}>+1</button>
      <button onClick={() => store.dispatch(decAction(1))}>-1</button>
    </div>
  );
}
